<template> 
	<view class="info_box" :style="box_style">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<view class="container" v-if="listData.phone_list && listData.phone_list[0]">
			<view v-for="(item, index) in listData.phone_list" :key="index">
				<view class="list_title">{{item.cat_name}}</view>
				<view class="phone_list">
					<view class="list-item" v-for="(items,indexs) in item.phone_list" :key="indexs" @tap="tel_phone(items.name,items.phone)">
						<view class="list_box">{{items.name}}</view>
						<view class="tel_phone">{{items.phone}}</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view style="height:16rpx;background-color:#f4f4f4;"></view>
			</view>
		</view>
		<view class="tel_btn" :style="no_other_info" v-if="listData.now_village && listData.now_village.property_phone && listData.now_village.property_phone[0]">
			<button type="primary" class="tel_property" :style="btn_style" @tap="tel_property_phone(listData.now_village.property_phone)">联系物业</button>
		</view>
		<div class='tip_box_no_data' v-if="no_data">
			<image style="width: 85%; height: auto;" src="../../../static/images/no_data.png" mode="widthFix" class="no_data_img"></image>
			<div class='no_tip_content'>
				<lang keywords="抱歉，暂无添加电话~"></lang>
			</div>
		</div>
		<!-- 弹层 -->
		<view>
			<uni-popup ref="popup" type="center" class="popup_box_msg" :maskClick="false" style="width: 100%;">
				<view class="popup-box" :style="popup_box_style">
					<view class="popup-title" :style="popup_box_content">
						联系物业
					</view>
					
					<scroll-view class="popup-list" scroll-y="true" scroll-top="0" show-scrollbar="false">
						<view v-if="kf_url" class="popup_conten" :style="popup_box_content" @tap="kf_parse_url(kf_url)">
							<view class="tel_tip">
								<image :src="kf_img" class="tel_img"></image>
								<view class="tel_msg">在线客服</view>
							</view>
						</view>
						<view v-if="!phone_list || !phone_list[0]" class="popup_conten" :style="popup_box_content" @tap="tel(phone)">
							<view class="tel_tip">
								<image src="../../../static/images/tel_phone.png?t=01" class="tel_img"></image>
								<view class="tel_msg">{{phone_name}}</view>
							</view>
						</view>
						<view v-if="phone_list && phone_list[0]" v-for="(val, key) in phone_list" class="popup_conten" :style="popup_box_content" @tap="tel(val)">
							<view class="tel_tip">
								<image src="../../../static/images/tel_phone.png?t=01" class="tel_img"></image>
								<view class="tel_msg">{{val}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="close_box" :style="popup_box_style">
					<view class="close_click_box" @tap="closePopup">
						<image src="../../../static/images/close.png" class="close_img"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';

	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;

	const getPhoneList = () => {
		common.post(
			'HouseApi&a=house_phone', {
				village_id: _this.village_id,
				pigcms_id: _this.pigcms_id
			},
			data => {
				if (data) {
					console.log('HouseApi&a=house_phone', data);
					console.log(data);
					_this.listData = data;
					if (data && (!data['phone_list'] || !data['phone_list'][0])) {
						_this.no_other_info = 'padding-top: 80%;';
					}
					if (data && data.kf_url) {
						_this.kf_url = data.kf_url
						_this.kf_img = data.kf_img
					}
					if (!data || ((!data.now_village || !data.now_village.property_phone || !data.now_village.property_phone[0]) && (!data.phone_list || !data.phone_list[0]))) {
						_this.no_data = true
					}
				}
			}
		);
	}
	export default {
		data() {
			return {
			    user_options: {},
			    choose_options: {},
				property_id: '',
				village_id: '',
				pigcms_id: '',
				village_name: '',
				popup_box_style: '',
				popup_box_content: '',
				listData: [],
				box_style: '',
				mobile_head_color: '',
				btn_style: '',
				phone_name: '',
				phone_list: [],
				kf_url: '',
				kf_img: '',
				phone: '',
				no_other_info: '',
				no_data: false
			};
		},
		onShow() {
			
			// #ifdef H5
				common.hideWxShare()
			// #endif

		},
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.mobile_head_color + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.mobile_head_color + ';';
				
				_this.showMyPage();
			});
		},
		components: {
			uniPopup
		},
		methods: {
			kf_parse_url(url) {
				common.parseUrl(url);
			},
			tel(phone) {
				console.log('phone', phone);
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			tel_phone(phone_name, phone) {
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			tel_property_phone(phone_list) {
				console.log('phone_list', phone_list);
				_this.phone_list = phone_list;
				_this.phone_name = '联系物业';
				_this.$refs.popup.open();
				_this.auto_width()
			},
			auto_width() {
				uni.getSystemInfo({
				    success: function (res) {
						var windowWidth = res.windowWidth * 0.8 - 30;
						var windowWidthContent = windowWidth;
						_this.popup_box_style = 'width:' + windowWidth + 'px;';
						_this.popup_box_content = 'width:' + windowWidthContent + 'px;';
				    }
				});
			},
			showMyPage(){
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.village_name = res.village_name;
					if (res.property_id && res.property_id>0) {
						_this.property_id = res.property_id;
					}
					if (res.pigcms_id && res.pigcms_id>0) {
						_this.pigcms_id = res.pigcms_id;
					}
				}

				if (app.globalData.is_login) {
					_this.choose_options = {};
					if (!_this.village_id) {
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
							showCancel: false,
							confirmText: common.changeTxt('选择'),
							success: function(res) {
								if (res.confirm) {
									var url = '/pages/village/my/villagelist';
									if (_this.property_id && _this.property_id > 0) {
										url += '?property_id=' + _this.property_id;
									}
									uni.redirectTo({
										url: url
									});
								}
							}
						});
					} else {
						getPhoneList()
					}
				} else {
					_this.user_options = {
						toLogin: true
					};
				}
			},
			getUserInfo(e) {
				if (e.userInfo) {
					_this.showMyPage();
				} else {
					_this.user_options = {}
					if (common.checkIsFooterPage("/pages/village/index/index")) {
						wx.switchTab({
							url: "/pages/village/index/index"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village/index/index',
						})
					}
				}
			},
			openPopup() {
				_this.$refs.popup.open();
				_this.auto_width()
			},
			closePopup() {
				_this.$refs.popup.close();
			},
			chooseHouseId(e) {
				_this.pigcms_id = e.pigcms_id;
				getPhoneList();
				_this.closePopup();
			}
		}
	};
</script>

<style>
	page {
		background: rgb(245,245,245);
	}
	.info_box {
		background-color: #f5f5f5;
	}

	.container {
		padding-top: 36rpx;
		margin: 0rpx;
		overflow-x: hidden;
		background-color: #f5f5f5;
		padding-bottom: 160rpx;
		padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}
	
	.list_title {
		margin: 0px 30rpx;
		color: #969696;
	}
	.phone_list {
		background: #FFFFFF;
		overflow: hidden;
		margin: 20rpx 30rpx;
		border-radius: 30rpx;
	}
	.tel_phone {
		text-align: right;
		flex-grow: 1;
		padding-right: 6rpx;
		color: #c6c6c6;
		font-size: 26rpx;
	}
	.tel_btn {
		position:fixed;
		bottom:0px;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #f5f5f5;
		z-index:2;
		left: 0;
		right: 0;
	}
	.tel_property {
		background-color: #2681f3;
		border-radius: 50rpx;
		font-size: 32rpx;
		box-shadow:0px 30rpx 30rpx -30rpx #2681f3;
		margin:0 80rpx;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.list_box {
		font-size: 26rpx;
		color: #333333;
		font-weight: 500;
		line-height: 60rpx;
	}
	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		width: 100%;
		height: 100%;
	}
	.popup-box {
		padding: 30rpx 0 50rpx;
		background-color: #ffffff;
	}
	.popup-box .popup-title {
		text-align: center;
		font-size: 30rpx 0;
		color: #333333;
		font-weight: 500;
		line-height: 60rpx;
		padding-bottom: 45rpx;
	}
	.popup-box .popup_conten {
		padding: 45rpx 0;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.popup-box .tel_tip {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		text-align: left;
	}
	.popup-box .tel_msg {
		text-align: left;
		flex-grow: 1;
		padding-left: 20rpx;
	}
	.popup-box .tel_img {
		width: 40rpx;
		height: 40rpx;
		padding-left: 30rpx;
	}
	.popup_box_msg .close_box {
		margin-top: 50rpx;
		position: absolute;
		bottom: -120rpx;
		text-align: -webkit-center;
	}
	.popup_box_msg .close_click_box {
		width: 100rpx;
		padding: 20rpx 0;
	}
	.popup_box_msg .close_img {
		width: 60rpx;
		height: 60rpx;
	}
	
	.popup_box_msg .popup-list {
		height: 400rpx;
		overflow: hidden;
	}
	.tip_box_no_data {
		background-color: #FFFFFF;
		padding: 45% 100rpx;
		font-size: 28rpx;
		height: 100%;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
</style>
